<template>
  <div class="customer-info-container">
    <el-row :gutter="15">
      <el-col :span="24">
        <order-input ref="orderRef" @drawer="Drawer" @fetch-data="fetchData" />
        <product-list ref="productRef" @fetch-data="fetchData" />
        <gift-list ref="giftListRef" @fetch-data="fetchData" />
        <shop-list ref="shopRef" @fetch-data="fetchData" />
        <payment-list ref="paymentRef" @fetch-data="fetchData" />
        <invoicing-list
          ref="invoicingListRef"
          :pageflow="3"
          @fetch-data="fetchData"
        />
      </el-col>

      <el-drawer v-model="isDrawer" :with-header="false">
        <el-card shadow="hover">
          <template #header>
            客户基本信息
            <el-button
              class="card-header-tag"
              :type="CustomerInfo.BusinessPerson ? 'success' : 'danger'"
              size="small"
              @click="CustomerHandle"
            >
              补充详情
            </el-button>
          </template>
          <customer-info ref="customerInfoRef" />
        </el-card>
        <el-card shadow="hover">
          <template #header>
            签单业务销售人员信息
            <el-button
              class="card-header-tag"
              type="success"
              size="small"
              @click="toRecord"
            >
              查看商机跟进记录
            </el-button>
          </template>
          <salestff-info ref="saleStaffInfoRef" />
        </el-card>
      </el-drawer>
    </el-row>
    <div></div>
    <gift ref="giftRef" @fetch-data="fetchData" />
    <invoicing ref="invoicingRef" @fetch-data="fetchData" />
    <license ref="licenseRef" @fetch-data="fetchData" />
    <customer ref="customerRef" @fetch-data="fetchData" />
    <TrackRecord ref="recordRef" @fetch-data="fetchData" />
  </div>
</template>

<script>
  import TrackRecord from '@/views/business/components/TrackRecord'

  import { getOrderInfo } from '@/api/businessOrder'
  import OrderInput from '@/views/business/components/OrderInput'
  import CustomerInfo from '@/views/business/components/CustomerInfo'
  import SalestffInfo from '@/views/business/components/SalestffInfo'
  import ProductList from '@/views/business//components/ProductList'
  import GiftList from '@/views/business//components/GiftList'
  import ShopList from '@/views/business//components/ShopList'
  import InvoicingList from '@/views/business//components/InvoicingList'
  import PaymentList from '@/views/business//components/PaymentList'
  import Gift from '@/views/business/components/Gift'
  import Invoicing from '@/views/business/components/Invoicing'
  import License from '@/views/business/components/License'
  import Customer from '@/views/business/components/Customer'
  import { Delete, Plus, Search } from '@element-plus/icons-vue'
  import { MoreFilled } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'InvoicingOrder',
    components: {
      OrderInput,
      CustomerInfo,
      SalestffInfo,
      ProductList,
      GiftList,
      ShopList,
      PaymentList,
      InvoicingList,
      Customer,
      TrackRecord,
      License,
      Invoicing,
      Gift,
    },
    setup() {
      const route = useRoute()
      // const router = useRouter()
      const activeNames = ref(['1'])

      const state = reactive({
        recordRef: null,
        isDrawer: false,
        Licenses: {},
        SaleStaffInfo: {},

        orderid: 0,
        orderRef: null,
        CustomerInfo: {},
        customerInfoRef: null,
        saleStaffInfoRef: null,
        productRef: null,
        giftListRef: null,
        shopRef: null,
        paymentRef: null,
        invoicingListRef: null,
        editRef: null,
        customerRef: null,
        licenseRef: null,
        invoicingRef: null,
        trusteeshipRef: null,
        domainRef: null,
        giftRef: null,
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        CustomerPickID: '',
        selectRows: '',
        queryForm: {
          orderid: 0,
          pageNo: 1,
          pageSize: 10,
          title: '',
        },
        isContract: 0,
        ContractUrl: '',
        OrderFlowSet: {},
      })

      const handleChange = (val) => {
        console.log(val)
      }
      const InvoicingHandle = () => {
        state.invoicingRef.showEdit(state.CustomerInfo)
      }
      const LicenseHandle = () => {
        state.licenseRef.showEdit(state.CustomerInfo)
      }
      const CustomerHandle = () => {
        state.customerRef.showEdit(state.CustomerInfo)
      }
      const activities = [
        {
          content: '签单人签约',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          icon: MoreFilled,
        },
        {
          content: '到单录入',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87',
        },
        {
          content: '出纳确认收款',
          timestamp: '2018-04-03 20:46',
          type: 'primary',
          hollow: true,
        },
        {
          content: '开具发票',
          timestamp: '2018-04-03 20:46',
        },
        {
          content: '业务提单',
          timestamp: '2018-04-03 20:46',
          size: 'large',
        },
        {
          content: '审核分单',
          timestamp: '2018-04-03 20:46',
        },
        {
          content: '服务中',
          timestamp: '2018-04-03 20:46',
        },
      ]

      const setSelectRows = (val) => {
        state.selectRows = val
      }

      const handleEdit = (row) => {
        if (row.id) {
          state.editRef.showEdit(row)
        } else {
          state.editRef.showEdit()
        }
      }

      const fetchData = async () => {
        state.listLoading = true
        const {
          data: {
            BusinessClass,
            OrderInfo,
            CustomerInfo,
            SaleStaffInfo,
            Licenses,
            ProductList,
            GiftList,
            PaymentList,
            OrderFlowSet,
            StoreList,
            InvoicingList,
          },
        } = await getOrderInfo(state.queryForm)
        state.OrderFlowSet = OrderFlowSet
        state.CustomerInfo = CustomerInfo
        state.orderid = OrderInfo.OrderID
        state.CustomerPickID = OrderInfo.CustomerPickID
        state.Licenses = Licenses

        let green
        if (CustomerInfo.BusinessPerson && Licenses.LicensePhoto.length != 0) {
          green = true
        } else {
          green = false
        }
        console.log('green', green)

        state.orderRef.showOrder(OrderInfo, BusinessClass, green)

        state.SaleStaffInfo = SaleStaffInfo

        state.customerInfoRef?.showInfo(state.CustomerInfo, state.Licenses)
        state.saleStaffInfoRef?.showInfo(state.SaleStaffInfo)

        state.productRef.showList(OrderInfo, ProductList)
        state.giftListRef.showList(OrderInfo, GiftList)
        state.shopRef.showList(OrderInfo, StoreList)
        state.paymentRef.showList(OrderInfo, PaymentList)
        state.invoicingListRef.showList(OrderInfo, InvoicingList, PaymentList)
        console.log('触发这里了吗？')

        state.listLoading = false
      }
      const Drawer = () => {
        state.isDrawer = true
        nextTick(() => {
          state.customerInfoRef.showInfo(state.CustomerInfo, state.Licenses)
          state.saleStaffInfoRef.showInfo(state.SaleStaffInfo)
        })
      }
      onMounted(() => {
        if (route.query.orderid) {
          state.queryForm.orderid = route.query.orderid
        }
        fetchData()
      })
      watch(
        () => route.params,
        () => {
          // 当路由参数变化时，重新加载数据或执行其他逻辑
          if (route.query.orderid) {
            state.queryForm.orderid = route.query.orderid
          }
          fetchData()
        },
        { immediate: true }
      )
      provide('rootMethods', { fetchData })
      provide('tootMethods', { fetchData })

      const toRecord = () => {
        const row = {
          CustomerPickID: state.CustomerPickID,
          OrderID: state.orderid,
        }
        state.recordRef.handleEdit(row)
      }
      return {
        ...toRefs(state),
        activeNames,
        toRecord,
        CustomerHandle,
        InvoicingHandle,
        LicenseHandle,
        handleChange,
        activities,
        Drawer,
        setSelectRows,
        handleEdit,
        fetchData,
        Delete,
        Plus,
        Search,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .customer-info-container {
    padding: 0 !important;
    background: $base-color-background !important;
  }
</style>
